<template>
  <div class="fillcontain">
    <head-top></head-top>
    <div class="table_container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <!-- 具体内容，下拉框 row是下拉框中的对象，包含每个属性的对象id，address-->
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="笔记 ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="发布人">
                <span>{{ props.row.nickname }}</span>
              </el-form-item>
             
              <el-form-item label="笔记标题">
                <span>{{ props.row.title }}</span>
              </el-form-item>

              <el-form-item label="内容">
                <span>{{ props.row.content }}</span>
              </el-form-item>

              <el-form-item label="类型">
                <span>{{ props.row.type }}</span>
              </el-form-item>

              <el-form-item label="发布时间">
                <span>{{ props.row.time }}</span>
              </el-form-item>

              <el-form-item label="评论量">
                <span>{{ props.row.commentNum }}</span>
              </el-form-item>
              <el-form-item label="收藏量">
                <span>{{ props.row.collectNum }}</span>
              </el-form-item>  
              <el-form-item label="点赞量">
                <span>{{ props.row.likeNum }}</span>
              </el-form-item>
               <el-form-item label="分享量">
                <span>{{ props.row.shareNum }}</span>
               </el-form-item>
              <el-form-item label="图片">
                     <el-row :gutter="20">    
                          <el-col v-for="item in props.row.pics" :key="item.id" :span="3">             
                            <img
                            style="width: 100px; height: 100px"
                            :src="item.url"
                            fit="fit"></img>
    
                    </el-col> 
               
                </el-row>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <!-- table head -->
        <el-table-column label="笔记名称" prop="title"> </el-table-column>
        <el-table-column label="发布人" prop="nickname"> </el-table-column>
        <el-table-column label="发布时间" prop="time"> </el-table-column>
        <el-table-column label="类型" prop="type"> </el-table-column>
        <!-- <el-table-column label="操作" width="200">
          <template slot-scope="scope">
          
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div class="Pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="count"
        >
        </el-pagination>
      </div>

    
    </div>
  </div>
</template>

<script>
import headTop from "../components/headTop";
import { baseUrl, baseImgPath } from "@/config/env";
import { findActivityWorkByMap } from "@/api/note";

export default {
  data() {
    return {
      baseUrl,
      baseImgPath,
      offset: 0,
      limit: 10,
      count: 0,
      tableData: [],
      currentPage: 1,
      selectTable: {},
      dialogFormVisible: false,
      addr: {},
      notes: {},
      input3: "",
      select: 1,
      selectOptions: [
        {
          lable: "笔记标题",
          value: "1",
        },
      ],
    };
  },
  created() {

    console.log("create");
   

  },
  
    activated() {
       let id=  this.$route.query.id
      if(!id){
        console.log("未接收到id");return;
      }
      console.log("activityId",id);
      this.id = id;
      console.log('我这个页面显示就会执行');
      this.initData()
    },
    deactivated: function () {
      console.log('我这个页面退出的会执行');
    },


    onshow() {
   

    console.log("show");
   

  },
  components: {
    headTop,
  },
  //这里运用async/await 进行异步处理，保证BMap加载进来后才执行后面的操作
  async mounted() {
      // let id=  this.$route.query.id
      // if(!id){
      //   console.log("未接收到id");return;
      // }
      // console.log("activityId",id);
      // this.id = id;
      //  this.initData();
      // console.log('mouted');
  },

  methods: {

     
    //初始化数据
    async initData() {
      try {
        this.getList();

        // const countData = await getResturantsCount();

        // this.getResturants();
      } catch (err) {
        console.log("获取数据失败", err);
      }
    },
    async getList() {
      let info = this.input3;
      let currentPage = this.currentPage;
      let pageSize = this.limit;
      let res;
      res = await findActivityWorkByMap(this.id)
      this.count = res.data.length
      this.tableData = res.data
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.offset = (val - 1) * this.limit;
      this.getList();
    },
    async handleEdit(index, row) {
      //   this.addr = ;
      this.selectTable = row
      this.dialogFormVisible = true;
      
    },
    async handleDelete(index, row) {
      return;
    },


  },
};
</script>

<style lang="less">
@import "../style/mixin";
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.table_container {
  padding: 20px;
}
.Pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
